<template>
  <uni-popup ref="popup" type="right" :is-mask-click="false" safeAreaInsetTop>
    <view class="filter-scroll-view">
      <view class="filter-mask" @click="toggle"></view>
      <view>
        <scroll-view class="scroll-view-box" scroll-y="true">
          <view v-if="navigationStyle === 'custom'" style="height: 30px"></view>
          <u-gap bgColor="#fff" height="20"></u-gap>
          <CuFilterDictLabel
            v-if="showArr.indexOf('managerType') > -1"
            title="隐患类型"
            dictType="dbd_manager_type"
            v-model="searchData.managerType"
          />
          <CuFilterDictLabel
            v-if="showArr.indexOf('managerStatus') > -1"
            title="状态"
            dictType="dbd_manager_status"
            v-model="searchData.managerStatus"
          />
          <CuFilterDictLabel
            v-if="showArr.indexOf('managerSource') > -1"
            title="隐患来源"
            dictType="dbd_manager_source"
            v-model="searchData.managerSource"
          />
          <CuFilterDictLabel
            v-if="showArr.indexOf('periodUnit') > -1"
            title="排查周期"
            dictType="sys_period_unit"
            v-model="searchData.periodUnit"
          />
          <CuFilterDictLabel
            v-if="showArr.indexOf('riskLevel') > -1"
            title="风险等级"
            dictType="dbd_risk_level"
            v-model="searchData.riskLevel"
          />
          <CuFilterDictLabel
            v-if="showArr.indexOf('checkStatus') > -1"
            title="排查状态"
            dictType="dbd_check_status"
            v-model="searchData.checkStatus"
          />

          <u-gap bgColor="#F1F1F1" height="5"></u-gap>
          <view class="cu-padding-left-30" v-if="showArr.indexOf('selectUser') > -1">
            <CuUserSelector
              label="上报人"
              placeholder="选择人员"
              :required="false"
              v-model="searchData.createBy"
              v-if="showCreateBy"
            />
            <CuUserSelector
              label="审核人"
              placeholder="选择人员"
              :required="false"
              v-model="searchData.reviewPersonId"
            />
            <CuUserSelector
              label="整改人"
              placeholder="选择人员"
              :required="false"
              v-model="searchData.chargePersonId"
            />
            <CuUserSelector
              label="验收人"
              placeholder="选择人员"
              :required="false"
              v-model="searchData.acceptancePersonId"
            />
          </view>
          <u-gap bgColor="#F1F1F1" height="5"></u-gap>
          <CuFilterTime v-if="showArr.indexOf('selectTime') > -1 && showTime" v-model="searchData.date" />
        </scroll-view>
        <view class="btn-wrap">
          <view class="reset" @click="resetHandler">重置条件</view>
          <view class="confirm" @click="submitHandler">搜索</view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import CuUserSelector from '@/components/CuUserSelector/index.vue'
import CuFilterDictLabel from './components/cu-filter-dict-label.vue'
import CuFilterTime from './components/cu-filter-time.vue'
export default {
  name: 'CuFilter',
  components: {
    CuFilterDictLabel,
    CuUserSelector,
    CuFilterTime
  },
  data() {
    return {
      showTime: false,
      show: false,
      // 隐患类型
      dbdManagerTypeList: [
        {
          dictLabel: '安全',
          dictValue: 1
        },
        {
          dictLabel: '工艺',
          dictValue: 2
        },
        {
          dictLabel: '电气',
          dictValue: 3
        },
        {
          dictLabel: '仪表',
          dictValue: 4
        },
        {
          dictLabel: '消防',
          dictValue: 5
        },
        {
          dictLabel: '设备',
          dictValue: 6
        },
        {
          dictLabel: '环保',
          dictValue: 7
        },
        {
          dictLabel: '其他',
          dictValue: 8
        }
      ],
      //隐患来源
      dbdManagerSourceList: [
        {
          dictLabel: '随手拍',
          dictValue: 1
        },
        {
          dictLabel: '管控排查',
          dictValue: 2
        },
        {
          dictLabel: '报警中心上报',
          dictValue: 3
        },
        {
          dictLabel: '设备预防性维护',
          dictValue: 4
        },
        {
          dictLabel: '隐患排查上报',
          dictValue: 5
        },
        {
          dictLabel: '检查与自评',
          dictValue: 6
        }
      ],
      //隐患状态
      // managerStatusList: [
      //   {
      //     dictValue: 1,
      //     dictLabel: "待分派",
      //   },
      //   {
      //     dictValue: 2,
      //     dictLabel: "待审核",
      //   },
      //   {
      //     dictValue: 3,
      //     dictLabel: "待审批",
      //   },
      //   {
      //     dictValue: 4,
      //     dictLabel: "待整改",
      //   },
      //   {
      //     dictValue: 5,
      //     dictLabel: "待验收",
      //   },
      // ],
      searchData: {
        managerType: undefined,
        managerStatus: undefined,
        managerSource: undefined,
        periodUnit: undefined,
        riskLevel: undefined,
        checkStatus: undefined,
        createBy: undefined,
        reviewPersonId: undefined,
        chargePersonId: undefined,
        acceptancePersonId: undefined,
        date: []
      }
    }
  },
  props: {
    id: {
      type: [Number, Array, String]
    },
    /*
     * managerType 隐患类型
     * managerStatus 状态
     * managerSource 隐患来源
     * periodUnit 排查周期
     * riskLevel 风险等级
     * checkStatus 排查状态
     * selectUser 选择人员
     * selectTime 选择时间
     */
    showArr: {
      type: Array,
      default: () => []
    },
    showCreateBy: {
      type: Boolean,
      default: true
    },
    navigationStyle: {
      type: String,
      default: ''
    }
  },
  methods: {
    toggle() {
      if (this.show) {
        this.show = false
        this.showTime = false
        this.$refs.popup.close()
      } else {
        this.show = true
        this.$refs.popup.open()
        // 时间组件加载耗时，延迟加载
        this.$nextTick(() => {
          setTimeout(() => {
            this.showTime = true
          }, 100)
        })
      }
    },
    resetHandler() {
      this.searchData = {
        managerType: undefined,
        managerStatus: undefined,
        managerSource: undefined,
        periodUnit: undefined,
        riskLevel: undefined,
        checkStatus: undefined,
        createBy: undefined,
        reviewPersonId: undefined,
        chargePersonId: undefined,
        acceptancePersonId: undefined,
        date: []
      }
    },
    submitHandler() {
      this.$emit('submit', this.searchData)
      this.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-scroll-view {
  width: 100vw;
  height: 100vh;
  display: flex;

  .filter-mask {
    flex: 1;
  }

  .scroll-view-box {
    width: 672rpx;
    background: #fff;
    box-sizing: border-box;
    height: calc(100vh - 220rpx);
    /* #ifdef APP-PLUS */
    height: calc(100vh - 140rpx);
    /* #endif */
  }

  .btn-wrap {
    background: #fff;
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

    .reset,
    .confirm {
      width: 292rpx;
      line-height: 80rpx;
      background: #ffffff;
      font-size: 32rpx;
      text-align: center;
    }

    .reset {
      color: #666666;
      background: #ffffff;
      border: 1rpx solid #cccccc;
    }

    .confirm {
      background: #2ac0c8;
      color: #fff;
    }
  }
}
</style>
